<template>
  <div class="article-page">

  <div class="banner">
    <div class="container">

      <h1>{{article.title}}</h1>

      <articleMeta :article="article"></articleMeta>

    </div>
  </div>

  <div class="container page">

    <div class="row article-content">
      <div class="col-md-12">
        <p v-html="article.body">
        </p>
        <h2 id="introducing-ionic">Introducing RealWorld.</h2>
        <p>It's a great solution for learning how other frameworks work.</p>
      </div>
    </div>

    <hr />

    <div class="article-actions">
     <articleMeta :article="article"></articleMeta>
    </div>

    <div class="row">

      <div class="col-xs-12 col-md-8 offset-md-2">
        <article-compenents :slug="article.slug"></article-compenents>
      </div>

    </div>

  </div>

</div>
</template>

<script>
import {
  getArticlesinfo
} from "@/api/article";
import markdownIt from 'markdown-it'
import articleMeta from './components/article-meta'
import articleCompenents from './components/article-components'
export default {
  middleware: "authenticated",
  name: "article",
  components: {
    articleMeta,
    articleCompenents
  },
  // 当你想要动态页面内容有利于 SEO 或者是提升首屏渲染速度的时候，就在 asyncData 中发请求拿数据
  async asyncData({params}) {
   const data =    await getArticlesinfo(params.slug)
   const md = new markdownIt()
   data.article.body = md.render(data.article.body)
    // const res = await axios({
    //   method: 'GET',
    //   url: 'http://localhost:3000/data.json'
    // })
    return data;
  },

  // 如果是非异步数据或者普通数据，则正常的初始化到 data 中即可
  data() {
    return {
      foo: "bar",
    };
  },
};
</script>

<style>
</style>
